/**
 * 2. 调节方式-调度图
 */

var yuePictureSet = [
	{id: 0, index1: '洪门水库', index2: "resources/images/wateroptimum/schemechart.png", index4:92, index5:104, index3: [{
        name: 'I区',
        data: [100, 100, {
        	y: 100,
            dataLabels: {
            	enabled: true,
            	y: 40,
            	format: '{series.name}',
            	style: {fontSize: '18px', fontWeight: 'normal'}
            }
        }, 100, 100, 99, 99, 100, 100, 100, 100, 100],
        fillOpacity: 0,
        dashStyle: 'dash'
    }, {
        name: 'II区',
        data: [96, 96, 96, {
        	y: 96,
            dataLabels: {
            	enabled: true,
            	y: 40,
            	format: '{series.name}',
            	style: {fontSize: '18px', fontWeight: 'normal'}
            }
        }, 96, 95, 95, 96, 96, 96, 96, 96],
        fillOpacity: 0,
        dashStyle: 'dash'
    }]},
	{id: 1, index1: '廖坊水库', index2: "resources/images/wateroptimum/schemechart.png", index4:61, index5:68, index3: [{
        name: 'I区',
        data: [65, 65, {
        	y: 65,
            dataLabels: {
            	enabled: true,
            	y: 40,
            	format: '{series.name}',
            	style: {fontSize: '18px', fontWeight: 'normal'}
            }
        }, 65, 65, 64, 64, 65, 65, 65, 65, 65],
        fillOpacity: 0,
        dashStyle: 'dash'
    }, {
        name: 'II区',
        data: [63, 63, 63, {
        	y: 63,
            dataLabels: {
            	enabled: true,
            	y: 40,
            	format: '{series.name}',
            	style: {fontSize: '18px', fontWeight: 'normal'}
            }
        }, 63, 63, 63, 63, 63, 63, 63, 63],
        fillOpacity: 0,
        dashStyle: 'dash'
    }]}
];

var yuePictureSet2 = [
	{id: 0, index1: '洪门水库', index2: "app/view/waterOptimum/schemechart.png", index3: [{
        name: 'I区',
        data: [10000, 10000, {
        	y: 10000,
            dataLabels: {
            	enabled: true,
            	y: 40,
            	format: '{series.name}',
            	style: {fontSize: '18px', fontWeight: 'normal'}
            }
        }, 10000, 10000, 8000, 8000, 10000, 10000],
        fillOpacity: 0,
        dashStyle: 'dash'
    }, {
        name: 'II区',
        data: [8000, 8000, 8000, {
        	y: 8000,
            dataLabels: {
            	enabled: true,
            	y: 40,
            	format: '{series.name}',
            	style: {fontSize: '18px', fontWeight: 'normal'}
            }
        }, 8000, 7000, 7000, 8000, 8000],
        fillOpacity: 0,
        dashStyle: 'dash'
    }, {
        name: 'III区',
        data: [6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000],
        fillOpacity: 0
    }, {
        name: 'IV区',
        data: [4000, 4000, 4000, 4000, 4000, 4000, 4000, 3000, 3000],
        fillOpacity: 0
    }, {
        name: 'V区',
        data: [2000, 2000, 2000, 2000, 2000, 1500, 1500, 1800, 1800],
        fillOpacity: 0
    }, {
        name: 'VI区',
        data: [1000, 1000, 1000, 1000, {
            y: 1000,
            dataLabels: {
            	enabled: true,
            	y: 40,
            	format: '{series.name}',
            	style: {fontSize: '18px', fontWeight: 'normal'}
            }
        }, 1000, 1000, 1000, 1000],	        
        fillOpacity: 0
    }]},
	{id: 1, index1: '廖坊水库', index2: "app/view/waterOptimum/schemechart.png", index3: [{
        name: 'I区',
        data: [1000, 1000, {
        	y: 1000,
            dataLabels: {
            	enabled: true,
            	y: 40,
            	format: '{series.name}',
            	style: {fontSize: '18px', fontWeight: 'normal'}
            }
        }, 1000, 1000, 800, 800, 1000, 1000],
        fillOpacity: 0,
        dashStyle: 'dash'
    }, {
        name: 'II区',
        data: [800, 800, 800, {
        	y: 800,
            dataLabels: {
            	enabled: true,
            	y: 40,
            	format: '{series.name}',
            	style: {fontSize: '18px', fontWeight: 'normal'}
            }
        }, 800, 700, 700, 800, 800],
        fillOpacity: 0,
        dashStyle: 'dash'
    }, {
        name: 'III区',
        data: [600, 600, 600, 600, 600, 600, 600, 600, 600],
        fillOpacity: 0
    }, {
        name: 'IV区',
        data: [400, 400, 400, 400, 400, 400, 400, 300, 300],
        fillOpacity: 0
    }, {
        name: 'V区',
        data: [200, 200, 200, 200, 200, 150, 150, 180, 180],
        fillOpacity: 0
    }, {
        name: 'VI区',
        data: [100, 100, 100, 100, {
            y: 100,
            dataLabels: {
            	enabled: true,
            	y: 40,
            	format: '{series.name}',
            	style: {fontSize: '18px', fontWeight: 'normal'}
            }
        }, 100, 100, 100, 100],	        
        fillOpacity: 0
    }]}
];

var yueChartCurrent = 0;
var yueChartStep = 190;
var yueChartMin = 0 - (yueChartStep * (yuePictureSet.length - 3));
var yueChartMax = 0;
var yueSchedulingChart;

function yueUpPage(){
	if(yueChartMin >= 0)return ;
	yueChartCurrent = yueChartCurrent - yueChartStep;
	if(yueChartCurrent < yueChartMin)yueChartCurrent = yueChartMin;
	$('#movepanel').animate({top: yueChartCurrent + 'px'},"slow");
}

function yueDownPage(){
	if(yueChartMin >= 0)return ;
	yueChartCurrent = yueChartCurrent + yueChartStep;
	if(yueChartCurrent > yueChartMax)yueChartCurrent = yueChartMax;
	$('#movepanel').animate({top: yueChartCurrent + 'px'},"slow");
}

function yueChartscrollpanelString(){
	var output = '';
	output += '<div style="background-color:#ddebf7;height:100%;margin-left:20px;margin-right:20px;width:240px;padding: 0px 0 0px 0;">';
	output += '<div style="height:20px;width:240px;cursor: pointer;text-align: center;color: #FFFFFF;background-color: #c8e4fc;" onclick="yueDownPage()">▲</div>';
	output += '<div style="height:100%;width:240px;overflow: hidden;">';
	output += '<div id="movepanel" style="position: relative;">';
	
	output += singleyueChartscrollpanelString(yuePictureSet[0].id, yuePictureSet[0].index1, yuePictureSet[0].index2, true);
	for(var i=1;i<yuePictureSet.length;i++){
		output += singleyueChartscrollpanelString(yuePictureSet[i].id, yuePictureSet[i].index1, yuePictureSet[i].index2, false);
	}
	
	output += '</div>';
	output += '</div>';
	output += '<div style="height:20px;width:240px;cursor: pointer;text-align: center;color: #FFFFFF;background-color: #c8e4fc;" onclick="yueUpPage()">▼</div>';
	output += '</div>';
	return output;
}

function yueChartscrollpanelString2(){
	var output = '';
	output += '<div style="background-color:#ddebf7;height:100%;width:100%;padding: 0px 0px 0px 0px;overflow: hidden;">';
	
	output += '<div id="movepanel" style="position: relative;">';
	
	output += singleyueChartscrollpanelString(yuePictureSet[0].id, yuePictureSet[0].index1, yuePictureSet[0].index2, true);
	for(var i=1;i<yuePictureSet.length;i++){
		output += singleyueChartscrollpanelString(yuePictureSet[i].id, yuePictureSet[i].index1, yuePictureSet[i].index2, false);
	}
	
	output += '</div>';
	
	output += '</div>';
	return output;
}

function changeYueSCpicture(id){
	var item;
	for(var i=0;i<yuePictureSet.length;i++){
		if(yuePictureSet[i].id == id){
			item = yuePictureSet[i];
		}
		document.getElementById('yueSClistitem'+i).style.backgroundColor = '#ddebf7';
	}
	document.getElementById('yueSCpictureTitle').innerHTML = item.index1;

	if(yueSchedulingChart != null)yueSchedulingChart.destroy();
	yueSchedulingChart = dispatchyuechart('yuechart4-schedulingChart', '水位过程图', item);
	
	document.getElementById('yueSClistitem'+id).style.backgroundColor = '#acb9ca';
}

function singleyueChartscrollpanelString(id, name, path, isHighlighted){
	var output = '';
	if(isHighlighted)output += '<div id="yueSClistitem'+id+'" style="width:240px;padding: 20px 20px 20px 20px; background-color:#acb9ca;">';
	else output += '<div id="yueSClistitem'+id+'" style="width:240px;padding: 20px 20px 20px 20px;">';
	output += '<div style="text-align:center;">';
	output += '<div style="font-size: 15px;font-weight:bold;height:30px;line-height:30px;background-color:#fce4d6;width:200px;">'+name+'</div>';
	output += '<img src="'+path+'" style="height:120px;width:200px;cursor: pointer;" onclick="changeYueSCpicture('+id+')"/>';
	output += '</div>';
	output += '</div>';
	return output;
}

function replaceYueChartScrollPanel(){
	Ext.getCmp('chartscrollpanel').setHtml(yueChartscrollpanelString());
	yueChartMin = 0 - (yueChartStep * (yuePictureSet.length - 3));
	changeYueSCpicture(0);
	/*var link = "szy/dispatch/wateroptimum/schedulingChart";
	$.post(link,{},function(result){
		console.log(result);
		yuePictureSet = result;
		Ext.getCmp('chartscrollpanel').setHtml(yueChartscrollpanelString());
		yueChartMin = 0 - (yueChartStep * (yuePictureSet.length - 3));
		changeYueSCpicture(0);
	});*/
}

function dispatchyuechart(element, title, data){
	return Highcharts.chart(element, {
	    chart: {
	        type: 'area'
	    },
	    title: {
	        text: null
	    },
	    xAxis: {
	        allowDecimals: false,
	        labels: {
	            formatter: function () {
	                return this.value + '月'; // clean, unformatted number for year
	            }
	        }
	    },
	    yAxis: {
	        title: {
	            text: '水位(m)'
	        },
	        labels: {
	            formatter: function () {
	                return this.value / 1 + '';
	            }
	        },
	        min: data.index4,
	        max: data.index5
	    },
	    legend: {
	    	enabled: false
	    },
	    tooltip: {
	    	headerFormat: null,
	        pointFormat: '{point.x}月 <br/>水位低于 <b>{point.y:,.0f}</b><br/>{series.name}出力 '
	    },
	    plotOptions: {
	        area: {
	            pointStart: 1,
	            marker: {
	                enabled: false,
	                symbol: 'circle',
	                radius: 2,
	                states: {
	                    hover: {
	                        enabled: true
	                    }
	                }
	            }
	        }
	    },
	    series: data.index3
	});
}

Ext.define('Admin.view.needwater.subpage.schedulingChart',{
	extend:'Ext.panel.Panel',
	xtype:'yueSchedulingChart',
	//起别名
	alias:'yueSchedulingChart',
	require:[],
	user:[],
	userCLs:'big-100 small-100',
	layout: {
        type: 'hbox',
        align: 'stretch'
    },
	margin: '0 10 10 10',
	border: false,
	items:[{
		xtype: 'panel',
		layout: {
	        type: 'vbox',
	        align: 'stretch'
	    },
		region: 'center',
		items:[{
			region: 'north',
			height: 35,
			html: '<div id="yueSCpictureTitle" style="text-align: center;font-size: 16px;font-weight:bold;height:35px;line-height:35px;background-color:#fce4d6;">洪门水库</div>'
		},{
			region: 'center',
			html: '<div id="yuechart4-schedulingChart" style="width:500px; height:300px;"></div>',
			listeners: {
				resize: {
					fn: function(obj, width, height, eOpts){
					//	console.log(obj.getWidth()+"|"+obj.getHeight());
					//	console.log($("#yuechart4-schedulingChart").width()+"|"+$("#yuechart4-schedulingChart").height());
						$("#yuechart4-schedulingChart").width(width);
						$("#yuechart4-schedulingChart").height(height);
						yueSchedulingChart.reflow();
					}
				},
				boxready: {
					fn: function(obj, width, height, eOpts){
						$("#yuechart4-schedulingChart").width(width);
						$("#yuechart4-schedulingChart").height(height)
						yueSchedulingChart = dispatchyuechart('yuechart4-schedulingChart', '水位过程图', yuePictureSet[0]);
					//	console.log($("#yuechart4-schedulingChart").width()+"|"+$("#yuechart4-schedulingChart").height());
					}
				}
			},
			flex:1
		}] ,
		flex:1
	},{
		xtype: 'panel',
		layout: {
	        type: 'vbox',
	        align: 'stretch'
	    },
		width: 260,
		padding: '0 0 0 20',
		items:[{
			height: 20,
			html:'<div style="height:100%;width:100%;cursor: pointer;text-align: center;color: #FFFFFF;background-color: #c8e4fc;" onclick="yueDownPage()">▲</div>'
		},{
			flex:1,
			id: 'chartscrollpanel',
			html: yueChartscrollpanelString2()
		},{
			height: 20,
			html:'<div style="height:20px;width:240px;cursor: pointer;text-align: center;color: #FFFFFF;background-color: #c8e4fc;" onclick="yueUpPage()">▼</div>'
		}]
	}],
	listeners: {
		boxready: {
			fn: function(){
			//	replaceYueChartScrollPanel();
			}
		}
	}	
});